<%@ include file="/includes/taglibs.jsp"%>
<ul class="breadcrumb">
	<li><a href="<c:url value="/users/list.html"/>">User</a> <span
		class="divider">/</span></li>
	<li class="active">Add or Update data</li>
</ul>

<H2>Data User</H2>
<c:if test="${fn:length(errorMsg) ne 0}">
	<div class="well">
		<h4>
			<img src="<c:url value="/images/warning.gif"/>" align="top" /> There
			was errors!
		</h4>
		<ol>
			<c:forEach items="${errorMsg}" var="error">
				<li>${error}</li>
			</c:forEach>
		</ol>

	</div>
</c:if>

<form method="post" class="form-horizontal" style="padding: 5px;" name="form-data" novalidate="novalidate">
	<input type="hidden" id="userid" name="userid"/>
	<div class="control-group">
		<label class="control-label" for="username">UserName*</label>
		<div class="controls">
			<div class="input-prepend">				
				<input type="text" id="username" name="username" placeholder="UserName" />
			</div>
		</div>
	</div>
	<div class="control-group">
		<label class="control-label" for="passwd">Password*</label>
		<div class="controls">
			<div class="input-prepend">	
				<input type="password" id="passwd" name="passwd" placeholder="Password" />
			</div>
		</div>
	</div>	
	<div class="control-group">	
		<label class="control-label" for="rePassword">Confirm Password*</label>
		<div class="controls">
			<div class="input-prepend">	
				<input type="password" id="rePassword" name="rePassword" placeholder="Confirm Password" />
			</div>
		</div>
	</div>	
	<div class="control-group">	
		<label class="control-label" for="usergroupid">User Group*</label>
		<div class="controls">
			<div class="input-prepend">	
				<select id="usergroupid" name="usergroupid">
				</select>
			</div>
		</div>
	</div>		
	<div class="control-group">	
		<label class="control-label" for="enabled">Enable</label>
		<div class="controls">
			<input type="radio" name="enabled" id="enabled" value="Y" checked>Y
			<input type="radio" name="enabled" id="enabled" value="N">N
		</div>
	</div>		
	<div class="control-group">	
		<button type="submit" class="btn btn-primary">Save</button>
		<button type="reset" class="btn">Reset</button>
		<button type="button" class="btn"
			onclick="location.href='<c:url value="/users/list.html"/>'">Cancel</button>
	</div>
</form>

<script type="text/javascript">
// 	function cekPassword() {
// 		var pass1 = $('#passwd').val();//document.getElementById('passwd');
// 		var pass2 = $('#rePassword').val();//document.getElementById('rePassword');
// 		console.log("ini="+pass1);
// 		if (pass1 != pass2) {
// 			alert("Passwords doesn't match, please check again!");
// 			return false;
// 		} else {
// 			return true;
// 		}
// 	}
	
	$.getJSON('<c:url value="/usergroup/search/0/100" />',
	function(data) {
		$.each(data.content, function() {
			//console.log("list=" + this.usergroupid);
			$('#usergroupid').append($('<option />', {
				value : this.usergroupid,
				text : this.usergroupname
			}));
		});
	});
	$(document).ready(
	function() {
		var validasi = $('form[name="form-data"]').validate({
			rules:{
				username:"required",
				rePassword:"required",
				passwd:{
					required:true,
					minlength: 8
				},
				rePassword:{
					required:true,
					equalTo: "#passwd"
				},
				
			},
			errorClass: "help-inline"
		});
		function getURLParameter(name) {
			return decodeURI((RegExp(name + '=' + '(.+?)(&|$)').exec(
					location.search) || [ , null ])[1]);
		}

		var itemid = getURLParameter("itemId");
		//console.log("itemid="+itemid);
		if (itemid != null && itemid != 'null') {
			$.getJSON('<c:url value="/users/findone/" />' + itemid,
					function(data) {
						$.each(data, function(obj, value) {
							
							if (obj == "usergroup") {
								$.each(data.usergroup, function(obj1, value1) {
									if(obj1 == "usergroupid"){
										//console.log(obj1 + "=" + value1);
										$("#usergroupid").val(value1).prop('selected', 'selected');
									}
								});
							} else if( obj == "enabled"){
								$("input[name=enabled][value="+value+"]").prop('checked', true);
							} else if (obj == 'passwd') {
								$('input[name="' + obj + '"]').val();
							} else
								$('input[name="' + obj + '"]').val(value);
						});
					});
		}
		$('form[name="form-data"]').submit(function() {
			//console.log($('form[name="form-data"]').valid());
			if($('form[name="form-data"]').valid()){			
				var jsondata = $('form').serializeObject();
				var jsonst = JSON.stringify(jsondata);
				var json = JSON.parse(jsonst);
				var u = {
					"usergroupid" : +json.usergroupid
				};
				json.usergroupid = u;
				delete json.rePassword;

				//console.log(JSON.stringify(json));
				$.ajax({
					type : "POST",
					url : "<c:url value="/users/save" />",
					contentType : "application/json; charset=utf-8",
					dataType : "json",
					data : JSON.stringify(json)
				}).done(function(msg) {
					alert("Data Saved: " + msg);
					window.location.href = "<c:url value="/users/list.html"/>";
				});

			return false;
			}
		});
	});
</script>

